<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '380px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      // this.setOptions(this.chartData)
      this.setOptions()
      console.log(this.chartData)
    },
    setOptions({ bank_num, ali_num, wx_num, date } = {}) {
    // setOptions() {
      this.chart.setOption({
        title: {
          text: '近8天支付笔数统计',
          textStyle: {
            color: '#333',
            fontSize: 16,
            fontStyle: 'normal'
          }
          // top: '3%'
        },
        // },
        legend: {
          data: ['微信', '支付宝', '银行卡'],
          right: 10,
          // top: 12,
          textStyle: {
            color: '#4A5A7F',
            fontSize: 12
          },
          itemWidth: 24,
          itemHeight: 10,
          itemGap: 39
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '1%',
          right: '2%',
          bottom: '3%',
          containLabel: true,
          borderColor: 0,
          backgroundColor: 'transparent'
        },
        xAxis: [{
          type: 'category',
          data: date,
          axisLine: {
            lineStyle: {
              color: '#E1E1E1'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#4A5A7F',
            textStyle: {
              fontSize: '14'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#E1E1E1'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E1E1E1'
            }
          },
          axisLabel: {
            color: '#4A5A7F',
            textStyle: {
              fontSize: '14'
            }
          }
        }],
        series: [{
          name: '微信',
          type: 'bar',
          barWidth: '10%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 1,
                color: '#1CD8D2'
              }, {
                offset: 0,
                color: '#93EDC7'
              }]),
              barBorderRadius: [5, 5, 5, 5]
            }
          },
          data: wx_num
          // data: [400, 400, 300, 300, 300, 400, 300]
        },
        {
          name: '支付宝',
          type: 'bar',
          barWidth: '10%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 1,
                color: '#0072FF'
              }, {
                offset: 0,
                color: '#00C6FF'
              }]),
              barBorderRadius: [5, 5, 5, 5]
            }

          },
          data: ali_num
        },
        {
          name: '银行卡',
          type: 'bar',
          barWidth: '10%',
          stack: '上传',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 1,
                color: '#FFA751'
              }, {
                offset: 0,
                color: '#FFE259'
              }]),
              barBorderRadius: [5, 5, 5, 5]
            }

          },
          data: bank_num
        }

        ]
      })
      window.addEventListener('resize', () => {
        // 自动渲染echarts
        if (this.chart) {
          this.chart.resize()
        }
      })
    }
  }
}
</script>
